<div style="width:100%;margin-left:0;height:300px;" id="map"></div>
<p><i><small>
  <% if !@map_lat.nil? && !@map_lon.nil? %>
    Current view based on your shared location. Click <a href='/profile'>here</a> to adjust.
  <% else %>
    Share your own location on <a href='/profile'>your profile</a>.
    Learn about <a href='https://publiclab.org/wiki/location-privacy'>privacy</a>
  <% end %>
</small></i></p>
<script>
   L.Icon.DefaultIcon = L.Icon.extend({
    options: {
      iconUrl: 'https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
      shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    }
  });

  L.icon.defaultIcon = function () {
    return new L.Icon.DefaultIcon();
  };

  var bounds = new L.LatLngBounds(new L.LatLng(84.67351257 , -172.96875) , new L.LatLng(-54.36775852 , 178.59375)) ;
  var map = L.map('map' , {
      maxBounds: bounds , 
      maxBoundsViscosity: 0.75
    }).setView([15,0], 2);
  var baselayer = L.tileLayer('https://api.mapbox.com/styles/v1/jywarren/ckj06ujnc1nmi19nuelh46pr9/tiles/{z}/{x}/{y}?access_token=pk.eyJ1Ijoianl3YXJyZW4iLCJhIjoiVzVZcGg3NCJ9.BJ6ArUPuTs1JT9Ssu3K8ig', {
        tileSize: 512,
        zoomOffset: -1,
        attribution: '© <a href="https://apps.mapbox.com/feedback/">Mapbox</a> © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map) ; 
  map.options.minZoom = 1.5 ;

  <% @maps.each do |map| %>
    <% 
      lat = false
      lon = false
      map.tag.each do |tag|
        lat = tag.name.split(':').last if tag.name[0..2] == 'lat'
        lon = tag.name.split(':').last if tag.name[0..2] == 'lon'
      end
    %> 
     var default_Icon =new L.icon.defaultIcon() ;
    L.marker([<%= lat %>, <%= lon %>] , {icon: default_Icon}).addTo(map).bindPopup("<a href='<%= map.path %>'><%= map.title %></a>");
  <% end %>

   <% if !@map_lat.nil? && !@map_lon.nil? %>
      var map_lat = <%= @map_lat %> ;
      var map_lon = <%= @map_lon %> ;
      var user_latlng = L.latLng(map_lat, map_lon) ;
      map.setView(user_latlng , 3) ;
   <% end %>

    var markers_hash = new Map();
    var options = {
      mainContent: "people",
      setHash: setHash
    }
    setupLEL(map, markers_hash, options);

   setupFullScreen(map , map.getCenter().lat , map.getCenter().lng) ;
</script>

<br style="clear:both;" />
<h1 style="margin-top:10px;font-size:4em;">Maps <small style="font-size:50%;">open data from balloon and kite photography (<%= @maps.length %> and counting)</small></h1>
  
<hr />

<div class="row">

  <div class="col-md-3">
    <h3 style="margin-top:0;">Do-It-Yourself "satellite" imagery</h3>
    <p>These maps were largely made by <a href="/tool/balloon-mapping">taking photos from balloons and kites</a>, a technique adopted and refined by Public Lab contributors. <a href="//mapknitter.org">Make one yourself</a> and it can be featured here.</p>
    <hr />

    <h3>Popular tags</h3>

    <p>
      <a href="/maps/tag/oil-spill"><i class="fa fa-tag"></i> oil-spill</a>
      <a href="/maps/tag/wetlands"><i class="fa fa-tag"></i> wetlands</a>
      <a href="/maps/tag/landfill"><i class="fa fa-tag"></i> landfill</a>
      <a href="/maps/tag/garden"><i class="fa fa-tag"></i> garden</a>
      <a href="/maps/tag/ndvi"><i class="fa fa-tag"></i> NDVI</a>
      <a href="/maps/tag/gowanus"><i class="fa fa-tag"></i> gowanus</a>
      <a href="/maps/tag/protest"><i class="fa fa-tag"></i> protest</a>
    </p>

    <hr />

    <h3><i style="color:#aaa;" class="fa fa-hdd"></i> A grassroots data archive</h3>

    <p>This archive represents the collective work of our community to provide an alternative source for aerial imagery, and to highlight issues of environmental and social concern with Do-It-Yourself tools. The archive provides:</p>

    <ul>
      <li>A permanent, backed up archive</li>
      <li>A place to advocate around your data</li>
      <li>A space to discuss and understand the maps</li>
    </ul>
    <hr />
    <h3><i style="color:#aaa;" class="fa fa-globe"></i> How to contribute</h3>
    <p>Most of the maps in this archive were made in <a href="//mapknitter.org">MapKnitter</a>, a free and open source tool created by Public Lab contributors to turn aerial photos into maps.</p>
    <p>To add your open source map to the archive, contact <a href="mailto:staff@<%= request.host %>">staff@<%= request.host %></a> and be prepared to provide some background and to tell the story of your map. Creative Commons and Public Domain maps are <a href="/licenses">both accepted</a>.</p> 
  </div>

  <div class="col-md-9">
    <%= render :partial => "map/maps" %>
    <hr/>
  </div>
</div>
